<html> 
<head> 
<title>ajaxWebCtrl</title> 
  <link rel="icon" href="data:;base64,=">
  <style type="text/css" id="style">
	  .dimwrap { border: 2px solid red; height: 150px; width: 600px;}
	  .dimSlide { transform: scaleX(2) rotate(0deg); width: 256px;position: relative; top: 80px; left: 90px;}
	  .dimVal { width: 90px; height:30;position: relative; top: 20px; left: 20px}
  </style>
<script language="javascript">
function dimSet(evt) {
	var me, he;
  var resp, xmlhttp=new XMLHttpRequest();   
	me = evt.target;
	he = document.getElementById(me.id == "dimVal"? "dimSlide":"dimVal"); // need my other value node
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
		  resp = xmlhttp.responseText;
      console.log(resp);
      he.value = parseInt(resp);
		}
	}
  xmlhttp.open("GET","Val=" + me.value,true); xmlhttp.send()
} 
</script> 
</head> 
<body> 
    <h1>PWM LED --- Web Control for FireBeetle</h1>
    <div class="dimwrap" id="dimwrap">
	  <input class="dimVal" type="number" id="dimVal" min="0" max="10" step="1" value="0" onclick="dimSet(event)" oninput="dimSet(event)" > 
	  <input class= "dimSlide" type="range" id="dimSlide" min="0" max="10" step="1" value="0" onclick="dimSet(event)" oninput="dimSet(event)" >
    </div>
</body>
</html>
